<template>
	<div style="padding:3% 0">
		<com-alert v-if="showAlter" :alertInfo="alertInfo"></com-alert>
		<div class="box_heade">
			<div class="container">
				<div class="row mb-3">
					<div class="col"><com-litle
							:data1="{ title: 'COOPERATION WAYS', text: '合作方式', size: 'sm' }"></com-litle></div>
					<div class="col"></div>
				</div>
				<div class="row mb-1">
					<div class="mb-4 col-12 col-md-4">
						<form>
							<div class="form-group">
								<small id="emailHelp" class="form-text text-muted">如果您有需求可提交需求内容，我们会在第一时间联系您</small>
							</div>
							<div class="form-group">
								<input type="" v-model="form.name" class="form-control" id="exampleInputEmail1"
									placeholder="姓名（必填）">
							</div>
							<div class="form-group">
								<input type="" class="form-control" v-model="form.comName" id="exampleInputEmail1"
									placeholder="公司名称（必填）">
							</div>
							<div class="form-group">
								<input type="" class="form-control" v-model="form.job" id="exampleInputEmail1"
									placeholder="申请人职位（必填）">
							</div>

							<div class="form-group d-flex  align-items-center">
								<input type="" class="form-control col-9" v-model="form.phone" id="exampleInputEmail1"
									placeholder="电话（必填）">
								<button class="col-3 send_btn" @click.prevent="sendCode">{{ codeTime != 30 ? codeTime :
			'发送' }}</button>
							</div>
							<div class="form-group">
								<input type="" class="form-control" v-model="form.code" id="exampleInputEmail1"
									placeholder="验证码（必填）">
							</div>
							<div class="form-group">
								<input type="" class="form-control" v-model="form.content" id="exampleInputEmail1"
									placeholder="需要合作内容概述（必填）">
							</div>

						</form>
						<div style="background: linear-gradient(100deg, #124cff, #43daff 100%, #43daff 0);
    box-shadow: 3px 3px 14px 0 rgba(37,130,255,.38);padding:10px 0;color:#fff;border-radius:30px;cursor: pointer;"
							@click="handleSubmit">提交
						</div>
					</div>
					<div class="col-12 mb-md-4  col-md-8 text-right ">
						<div class="row cImg d-flex">
							<div class="col-5 col-sm-5 col-md-5 col-lg-4">
								<img src="https://www.fluxmq.com/static/img/ways-1.c0fa8dd6.png">
							</div>
							<div class="col-5 col-sm-5 col-md-5 col-lg-4">
								<img src="https://www.fluxmq.com/static/img/ways-2.44d139af.png">
							</div>
						</div>
						<div class="row mt-4 cImg">
							<div class="col-5 col-sm-5 col-md-5 col-lg-4">
								<img src="https://www.fluxmq.com/static/img/ways-3.160f5994.png">
							</div>
							<div class="col-5 col-sm-5 col-md-5 col-lg-4">
								<img src="https://www.fluxmq.com/static/img/ways-4.c19a1f19.png">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="container" style="padding-top: 5%;">
				<div class="row">
					<div class="col"><com-litle :data1="{ title: 'CONTACT US', text: '联系我们', size: 'sm' }"></com-litle>
					</div>
					<div class="col"></div>
				</div>
				<div class="row mt-4 d-flex ">
					<div class="col-12 col-md-5 col-xl-3 mb-4">
						<div class="d-flex"
							style=" border: 1px solid #ccc;padding: 10px 15px;background-color: #f5f8fa; 	box-shadow: 4px 4px 10px 0 rgba(0, 35, 81, .12);  border-radius:40px;justify-content:space-between">
							<img class="m-0" src="https://www.fluxmq.com/static/img/contact-3.d7fc136c.svg" alt="">
							<div class="text-left mr-4">
								<div style="color:#124cff;"> 技术交流微信群</div>
								<div><small>群1： 18510240791</small></div>
							</div>
						</div>
					</div>
					<div class="col-12  col-md-5 mb-4  col-xl-3">
						<div class="d-flex"
							style=" border: 1px solid #ccc;padding: 10px 15px;background-color: #f5f8fa; 	box-shadow: 4px 4px 10px 0 rgba(0, 35, 81, .12);  border-radius:40px;justify-content:space-between">
							<img class="m-0" src="https://www.fluxmq.com/static/img/contact-3.d7fc136c.svg" alt="">
							<div class="text-left mr-4">
								<div style="color: #124cff;">技术交流微信群</div>
								<div><small>群1： 18510240791</small></div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
import ComLitle from '@/components/ComLitle.vue';
import ComAlert from '@/components/ComAlert.vue'
export default {
	components: {
		ComLitle,
		ComAlert
	},
	data() {
		return {
			showAlter: false,
			codeTime: 30,
			form: {
				name: null,
				comName: null,
				job: null,
				phone: null,
				code: null,
				content: null
			},
			alertInfo: { class: null, msg: null }
		}
	},
	methods: {
		handleSubmit() {
			console.log(this.form);
			let { name, comName, job, phone, code, content } = this.form
			if (!name) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入姓名' }
				this.showAlter = true
			}
			else if (!comName) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入公司名称!' }
				this.showAlter = true
			}
			else if (!job) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入申请人职位!' }
				this.showAlter = true
			}
			else if (!phone) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入电话号码！' }
				this.showAlter = true
			}
			else if (phone.length != 11) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入正确的电话号码!' }
				this.showAlter = true
			}
			else if (this.codeTime == 30) {
				this.alertInfo = { class: 'alert-warning', msg: '请先获取验证码！' }
				this.showAlter = true
			}
			else if (!code) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入验证码！' }
				this.showAlter = true
			}

			else if (!content) {
				this.alertInfo = { class: 'alert-warning', msg: '请输入需要合作内容概述！' }
				this.showAlter = true
			}
			else {
				this.alertInfo = { class: 'alert-success', msg: '提交成功' }
				this.showAlter = true
			}

			setTimeout(() => {
				this.showAlter = false
			}, 2000);
		},
		sendCode() {
			if (this.codeTime !== 30) return; // 如果已经开始倒计时则不重复启动

			this.codeTime = 30; // 重置codeTime确保每次点击都从30秒开始
			let intervalId = setInterval(() => {
				if (this.codeTime <= 0) {
					clearInterval(intervalId); // 清除定时器
				} else {
					this.codeTime--; // 通过Vue实例直接修改响应式属性
				}
			}, 1000);
		}
	}
}
</script>

<style lang="scss" scoped>
.box_heade {}

a:hover {
	text-decoration: none !important;
}

input {
	border-radius: 30px;
	box-shadow: 4px 4px 10px 0 rgba(0, 35, 81, .12);
	border: 1px solid #dce4f2;
}



// 点击时候的边框
.cImg {
	img {
		width: 80%;
	}
}



.send_btn {
	border: none;
	color: #5babff;
	background-color: #ecf5ff;
	padding: 5px 0;
	border-radius: 30px;
	margin-left: 5px;

}
</style>